<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖拽</title>
		<style>
			main{
				
				width: 500px;
				height: 300px;
				border: 1px solid gray;
				margin:  0 auto;
			}
			li{
				height: 50px;
				line-height: 50px;
				border-bottom: 1px solid orange;
				cursor: move;
			}
		</style>
	</head>
	<body>
		<!--在html里边，提供了一系列的drag事件，可以实现元素的拖动。
			在H5里边要想实现元素的拖动，需要设置元素的dragable属性，来允许元素拖动。
			对于超链接和图片不用设置，因为这些元素默认是可以拖动的。
		-->
		<!--
			一系列的drag事件：
			ondragstart：开始拖动元素的时候 触发的事件
			ondrag：元素在拖动的时候 触发的事件
			ondragenter：当拖拽的元素 进入 其他元素区域内的时候触发的事件
			ondragover：当元素在其他元素的区域内拖动时触发的事件
			ondragleave：当元素离开其他元素所在区域的时候触发
			ondrop：拖动的手指松开拖动的鼠标键的时候触发的事件（需要阻止over事件和leave事件的默认行为）
			ondragend：拖动结束的时候触发的事件
		-->
		
		<main>
			<ol>
				<li draggable="true">HTML5</li>
				<li draggable="true">CSS</li>
				<li draggable="true">JavaScript</li>
				<li draggable="true">PHP</li>
				<li draggable="true">Node.js</li>
			</ol>
		</main>
		
		<img src="https://www.baidu.com/img/bd_logo1.png"/>
		
		<script type="text/javascript">
			
			var allLi = document.querySelectorAll('li');
			
			for (var i = 0; i < allLi.length;i++) {
				
				var li = allLi[i];
				
				//开始拖拽
				li.ondragstart = function(e){
					
					console.log('开始拖拽了')
					
					//设置id属性
					e.target.id = 'draging';
					
					//设置拖拽的操作数据信息
					//配置拖拽事件的允许的数据交换效果 为 move
					//dataTransfer：数据交换
					//effect：效果
					//allowed：被允许的
					e.dataTransfer.effectAllowed = 'move';
					
					//设置拖动时的图片信息
					//参数1：一个图片对象
					//参数2：鼠标在图片上的x坐标位置
					//参数3：鼠标在图片上的y坐标位置
					var img = document.querySelector('img');
					
					//e.dataTransfer.setDragImage(img,200,200);
					
					e.dataTransfer.setDragImage(e.target,-30,-10);
					
					//设置拖拽时的交换数据信息
					//参数1：数据格式 比如：text/url .我们这里直接传'li'
					//参数2：交换的数据。我们这里可以串id
					e.dataTransfer.setData('li', e.target.id);
				}
				
				//拖拽中。。。
				li.ondrag = function(){
					
					console.log('拖拽中。。。')
				}
				
				//进入到目标元素区域
				li.ondragenter = function(){
					
					console.log('我来了！！！')
				}
				
				//在目标元素上移动
				li.ondragover = function(e){
					
					e.preventDefault();
					
					console.log('我在你上空呢')
					
					e.currentTarget.style.backgroundColor = 'lightblue';
					
				}
				//离开目标元素区域
				li.ondragleave = function(e){
					
					console.log('我走了~~')
					e.preventDefault()
					
					e.currentTarget.style.backgroundColor = '';
				}
				//松开手指(需要 阻止over和leave的默认事件)
				li.ondrop = function(e){
					
					console.log('手指松开了')
					
					//根据传递数据信息，找到对应拖拽元素
					var id =  e.dataTransfer.getData('li');
					
					var li = document.getElementById(id);
					
					//如果拖拽的元素和目标元素是同一个  啥也不处理
					if (li == e.currentTarget){
						
						return;
					}
					
					//找某一个子元素的父元素
					var ol = li.parentElement;
					
					//insertBefore:把一个新元素插入到某一个元素的前边，第一个参数：新元素，第二个参数：目标元素
					//nextsibling:相邻的下一个元素
					ol.insertBefore(li,e.currentTarget.nextSibling)
					
				}
				
				//拖拽事件结束
				li.ondragend = function(){
					
					console.log("结束拖拽")
				}
			}
		</script>
	</body>
</html>
